<template>
  <a-modal
    :title="title"
    :width="width"
    :visible="visible"
    on-ok="handleOk"
    switch-fullscreen
    :ok-button-props="{ props: { disabled: disableSubmit } }"
    cancel-text="关闭"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
    </template>


    <a-table
      ref="table"
      row-key="id"
      size="middle"
      :columns="columns"
      :data-source="dataSource"
      :pagination="pagination"
      :loading="loading"
      @change="handleTableChange"
      class="j-table-force-nowrap"
    >
      <template slot="articleType" slot-scope="text">
        <a-tag color="green" v-if="text === '原创'">
          {{ text }}
        </a-tag>
        <a-tag color="cyan" v-else-if="text === '转载'">
          {{ text }}
        </a-tag>
        <a-tag color="blue" v-else>
          {{ text }}
        </a-tag>
      </template>
      <span slot="action" slot-scope="text, record">
        <a @click="recovery(record.id)">
          <a-icon type="rollback"/>
          恢复
        </a>
        <a-divider type="vertical"/>
        <a-popconfirm title="确定删除吗?" @confirm="() =>thoroughDelete(record.id)">
          <a>
            <a-icon type="delete"/>
            彻底删除
          </a>
        </a-popconfirm>
      </span>
    </a-table>

  </a-modal>
</template>

<script>

import {filterObj} from '@/utils/util'
import store from '@/store'
import {deleteAction, getAction, putAction} from '@/api/manage'

export default {
  name: 'RecycleBin',
  components: {},
  data() {
    return {
      title: '',
      width: 1024,
      visible: false,
      disableSubmit: false,

      // 表头
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 120,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '标题',
          align: 'center',
          dataIndex: 'title'
        },
        {
          title: '文章类型',
          align: 'center',
          dataIndex: 'articleType_dictText',
          scopedSlots: {customRender: 'articleType'}
        },
        {
          title: '收藏数',
          align: 'center',
          dataIndex: 'collectNum'
        },
        {
          title: '点赞数',
          align: 'center',
          dataIndex: 'likesNum'
        },
        {
          title: '浏览数',
          align: 'center',
          dataIndex: 'viewsNum'
        },
        {
          title: '发布时间',
          align: 'center',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: {customRender: 'action'}
        }
      ],
      url: {
        list: '/article/deleteList',
        delete: '/article/delete',
        thoroughDelete: '/article/thoroughDelete',
        recovery: '/article/recovery'
      },
      /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
      queryParam: {},
      /* 数据源 */
      dataSource: [],
      /* 分页参数 */
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      /* 排序参数 */
      sorter: {
        column: 'createTime',
        order: 'desc'
      },
      /* 筛选参数 */
      filters: {},
      /* table加载状态 */
      loading: false,
      /* table选中keys*/
      selectedRowKeys: [],
      /* table选中records*/
      selectionRows: []
    }
  },
  methods: {
    showModal() {
      this.loadData(1)
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.visible = false
    },
    handleTableChange(pagination, filters, sorter) {
      // 分页、排序、筛选变化时触发
      // TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = sorter.order === 'ascend' ? 'asc' : 'desc'
      }
      this.pagination = pagination
      this.loadData()
    },
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.pagination.current = 1
      }
      var params = this.getQueryParams()// 查询条件
      this.loading = true
      store.dispatch('manage/getAction', {
        url: this.url.list,
        params: params
      }).then((res) => {
        if (res.success) {
          this.dataSource = res.result.records
          this.pagination.total = res.result.total
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false
      })
    },
    getQueryParams() {
      // 获取查询条件
      const param = Object.assign(this.queryParam, this.sorter, this.filters)
      param.field = this.getQueryField()
      param.pageNo = this.pagination.current
      param.pageSize = this.pagination.pageSize
      return filterObj(param)
    },
    getQueryField() {
      // TODO 字段权限控制
      var str = 'id,'
      this.columns.forEach(function (value) {
        str += ',' + value.dataIndex
      })
      return str
    },
    thoroughDelete(id) {
      if (!this.url.delete) {
        this.$message.error('请设置url.delete属性!')
        return
      }
      deleteAction(this.url.thoroughDelete, {
        id: id
      }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    recovery(id) {
      getAction(this.url.recovery, {id: id}).then(res => {
        if (res.success) {
          this.visible = false
          this.$emit('ok')
        } else {
          this.$message.warning(res.message)
        }
      })
    }
  }
}
</script>
